<template>
  <div>
    <el-form ref="form1" :model="form1" :rules="rulesquery" label-width="150px">
      <el-form-item label="username" prop="username">
        <el-input v-model="form1.username" placeholder="please write shop name" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="password" prop="password">
        <el-input v-model="form1.password"
                  placeholder="if your account password is 123456/Pass1234/Shopee123，dont need write password"
                  style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="region" prop="region">
        <el-radio v-model="form1.region" label="sg">sg</el-radio>
        <el-radio v-model="form1.region" label="tw">tw</el-radio>
        <el-radio v-model="form1.region" label="ph">ph</el-radio>
        <el-radio v-model="form1.region" label="vn">vn</el-radio>
        <el-radio v-model="form1.region" label="id">id</el-radio>
        <el-radio v-model="form1.region" label="my">my</el-radio>
        <el-radio v-model="form1.region" label="th">th</el-radio>
        <el-radio v-model="form1.region" label="br">br</el-radio>
        <el-radio v-model="form1.region" label="in">in</el-radio>
        <el-radio v-model="form1.region" label="co">co</el-radio>
        <el-radio v-model="form1.region" label="cl">cl</el-radio>
        <el-radio v-model="form1.region" label="mx">mx</el-radio>
      </el-form-item>
      <el-form-item label="env" prop="env">
        <el-radio v-model="form1.env" label="test">test</el-radio>
        <el-radio v-model="form1.env" label="uat">uat</el-radio>
        <el-radio v-model="form1.env" label="staging">staging</el-radio>
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="onSubmitQueryShop('form1')">Query Now</el-button>
      </el-form-item>
    </el-form>
    <div v-if="showResultCard1" v-loading="isLoadingResult1">
      <result-pane :resultReturn="resultReturn1"></result-pane>
    </div>
    <br>
    <h1 style="padding-left:70px;">Change Message Quota</h1>
    <span style="padding-left:70px;"> quota = buyer_num * <a href = "https://seller.test.shopee.sg/admin/seller_crm/crm" >sop配置的百分比</a> </span>
    <el-form ref="form2" :model="form2" :rules="ruleschange" label-width="150px">
      <el-form-item label="shop_id" prop="shop_id">
        <el-input-number v-model="form2.shop_id" placeholder="请填写想修改的店铺id" style="width: 50%"></el-input-number>
      </el-form-item>
      <el-form-item label="buyer_num" prop="buyer_num">
        <el-input v-model="form2.buyer_num" placeholder="请填写人数" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="env" prop="env">
        <el-radio v-model="form2.env" label="test">test</el-radio>
        <el-radio v-model="form2.env" label="uat">uat</el-radio>
        <el-radio v-model="form2.env" label="staging">staging</el-radio>
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="onSubmitChangeMessageQutoa('form2')">Change Now</el-button>
      </el-form-item>
    </el-form>
    <div v-if="showResultCard2" v-loading="isLoadingResult2">
      <result-pane :resultReturn="resultReturn2"></result-pane>
    </div>
    <br>
    <h1 style="padding-left:70px;">Change Broadcast Quota</h1>
    <el-form ref="form3" :model="form3" :rules="ruleschange" label-width="150px">
      <el-form-item label="shop_id" prop="shop_id">
        <el-input-number v-model="form3.shop_id" placeholder="请填写想修改的店铺id" style="width: 50%"></el-input-number>
      </el-form-item>
      <el-form-item label="quota" prop="quota">
        <el-input v-model="form3.quota" placeholder="请填写次数" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="env" prop="env">
        <el-radio v-model="form3.env" label="test">test</el-radio>
        <el-radio v-model="form3.env" label="uat">uat</el-radio>
        <el-radio v-model="form3.env" label="staging">staging</el-radio>
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="onSubmitChangeBroacastQutoa('form3')">Change Now</el-button>
      </el-form-item>
    </el-form>
    <div v-if="showResultCard3" v-loading="isLoadingResult3">
      <result-pane :resultReturn="resultReturn3"></result-pane>
    </div>
  </div>
</template>

<script>
import ResultPane from './ResultPane'
import {api, postRequest} from "@/api/commit";

export default {
  name: "Qutoa",
  data() {
    return {
      showResultCard1: false,
      isLoadingResult1: false,
      showResultCard2: false,
      isLoadingResult2: false,
      showResultCard3: false,
      isLoadingResult3: false,
      form1: {
        username: '',
        password: '',
        region: 'sg',
        env: 'test'
      },
      form2: {
        shop_id: '7631084',
        buyer_num: '100',
        env: 'test'
      },
      form3: {
        shop_id: '7631084',
        quota: '100',
        env: 'test'
      },
      rulesquery: {
        username: [
          {required: true, message: 'shop_name不能为空', trigger: 'blur'}
        ],
        region: [
          {required: true, message: 'region不能为空', trigger: 'blur'}
        ],
        env: [
          {required: true, message: 'env不能为空', trigger: 'blur'}
        ],
      },
      ruleschange: {
        shop_id: [
          {required: true, message: 'shop_id不能为空', trigger: 'blur'}
        ],
        quota: [
          {required: true, message: 'quota不能为空', trigger: 'blur'}
        ],
        buyer_num: [
          {required: true, message: 'buyer_num不能为空', trigger: 'blur'}
        ],
        env: [
          {required: true, message: 'env不能为空', trigger: 'blur'}
        ],
      },
    }
  },
  components: {
    ResultPane
  },
  methods: {
    onSubmitQueryShop(form1) {
      this.$refs[form1].validate((valid) => {
        if (!valid) {
          this.$message({
            "message": "请检查表单！",
            "type": "warning"
          })
          return
        }
        this.resultReturn1 = ''
        this.showResultCard1 = true
        this.isLoadingResult1 = true
        if (this.form1.password == '') {
          delete this.form1.password
        }
        let params = Object.assign({}, this.form1);
        postRequest(api['get_info'], params).then((res) => {
          this.resultReturn1 = "shop_id: " + res.resultReturn.shopid + "     " + "user_id: " + res.resultReturn.id
          this.isLoadingResult1 = false
        }, (error) => {
          this.resultReturn1 = "请检查您的密码是不是有问题"
          this.isLoadingResult1 = false
        })
      })
    },
    onSubmitChangeMessageQutoa(form2) {
      this.$refs[form2].validate((valid) => {
        if (!valid) {
          this.$message({
            "message": "请检查表单！",
            "type": "warning"
          })
          return
        }
        this.resultReturn2 = ""
        this.showResultCard2 = true
        this.isLoadingResult2 = true
        let params = Object.assign({}, this.form2);
        postRequest(api['change_message_qutoa'], params).then((res) => {
          this.resultReturn2 = "恭喜，已经改成功了"
          this.isLoadingResult2 = false
        }, (error) => {
          this.resultReturn2 = "请检查您的输入是不是有问题"
          this.isLoadingResult2 = false
        })
      })
    },
    onSubmitChangeBroacastQutoa(form3) {
      this.$refs[form3].validate((valid) => {
        if (!valid) {
          this.$message({
            "message": "请检查表单！",
            "type": "warning"
          })
          return
        }
        this.resultReturn3 = ""
        this.showResultCard3 = true
        this.isLoadingResult3 = true
        let params = Object.assign({}, this.form3);
        postRequest(api['change_broadcast_qutoa'], params).then((res) => {
          this.resultReturn3 = "恭喜，已经改成功了"
          this.isLoadingResult3 = false
        }, (error) => {
          this.resultReturn3 = "请检查您的输入是不是有问题"
          this.isLoadingResult3 = false
        })
      })
    },
  },
}
</script>

<style scoped>

</style>
